<template>
	<view>
		<view class="backtrack" @click="returnPage" v-if="gameData.is_one==1">
			<image src="/static/returnPage.png" mode=""></image>
		</view>
		<!-- :controls="false" -->
		<video v-if="video_s&&gameData.is_one!=1" :src="video_s" autoplay page-gesture @ended="setConfiguration"
			:custom-cache='false' :controls="true" :enable-progress-gesture="true"></video>
		<video v-else-if="show&&game_config.video" :src="game_config.video" autoplay page-gesture @ended="ended_"
			:custom-cache='false' :controls="true" :enable-progress-gesture="true"></video>

		<block v-else>
			<image @tap="$u.throttle(prepare, 500)" class="bg" v-if="!loading"
				src="https://wjlm.goldsu.cn/file/b6a53179-3360-4f72-9434-f5d8d4e30b8f.jpg" mode="aspectFill" @load="">
			</image>
			<view class="team">
				<view class="team_item" v-for="(item ,index) in teamList">
					<image :src="item.pic" mode="aspectFill"
						:style="{border:game_config.status==2||item.setout?'calc(4vmin / 7.5) solid #FED194;':'calc(4vmin / 7.5) solid rgba(0,0,0,0);'}">
					</image>
					<view class="" :style="{color:item.setout?'#FED194':'#fff'}">
						{{item.title}}
					</view>
					<view class="icon">
						<u-icon name="checkmark-circle-fill" size="calc(42vmin / 7.5)"
							:color="item.setout?'#FED194':'#ccc'"></u-icon>
					</view>
				</view>
			</view>


			<view class="rule" @click="ruleShow=true" v-if="game_config.pic">
				<view class="">
					规则
				</view>
				<view class="">
					简介
				</view>
			</view>
		</block>

		<u-overlay :show="ruleShow" @click="ruleShow = false">
			<view style="display: flex;justify-content: center;flex-direction: column;height: 100vh;">
				<image :src="game_config.pic" mode="heightFix" style="height: 80vh;margin: 0 auto;"></image>
			</view>
		</u-overlay>
		<gameLoading :text="show?'':'等待其他队伍观看'" :showProps="gameData.is_one==1" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true, //是否观看视频
				video_s: '',
				gameData: {},
				teamList: [],
				gameChall: [],
				userData: {},
				userPeople: {},
				game_config: {},
				valve: false,
				ruleShow: false,
				acceptStatus: true,
				loading:true
			}
		},

		onShow() {
			this.userData = uni.getStorageSync("userData")
		},
		onUnload() {
			this.acceptStatus = false

		},
		mounted() {
			this.show = !uni.getStorageSync("gameDataVideoId")
			uni.$on('onMessage', (res) => {
				this.loading=false
				if (!this.acceptStatus) return;
				this.gameData = res.data.game
				this.gameChall = res.data.game_chall
				this.game_config = res.data.game_config
				this.userPeople = res.data.userPeople
				this.teamList = res.data.team
				this.video_s = uni.getStorageSync("video_s")
				this.$store.commit('switchGame', {
					code: false
				})

				//获取 已准备队伍信息。
				this.valve = false
				if (this.teamList.length && this.gameChall.length) this.teamList.forEach(item => {
					this.gameChall.forEach(items => {
						if (item.id == items.team_id) {
							item.setout = true
							if (item.id == this.userPeople.teamId) this.valve = true
						}
					})
				})
			})
			let game_id = uni.getStorageSync("gameId")
			let userData = uni.getStorageSync("userData")


			this.$ws.socketTask.send({
				data: JSON.stringify({
					game_id,
					user_id: userData.id
				}),
				async success() {
					console.log("消息发送成功")
				}
			});
		},
		methods: {
			ended_() {
				if(this.gameData.is_one == 1){
					this.prepare()
				}else{
					this.show = false
				}
				
				uni.setStorageSync('gameDataVideoId', this.gameData.id);
			},
			returnPage(){
				if(this.$ws) this.$ws.completeClose()
				uni.removeStorageSync('gameId');
				this.$audioStop()
				uni.switchTab({
					url: '/pages/index_/index'
				})
			},
			setConfiguration() {
				this.video_s = ''
				uni.setStorageSync('video_s', '');
			},

			prepare() {
				// if (this.valve || this.userPeople.cap_zt != 2) return;
				if (this.gameData.is_one != 1) {
					if (this.valve) return uni.showToast({
						title: '本队已准备，等待其余队伍准备！',
						icon: 'none'
					});
					if (this.userPeople.cap_zt != 2) return uni.showToast({
						title: '仅队长可操作',
						icon: 'none'
					});
					let autoCont = uni.createInnerAudioContext()
					autoCont.src = 'https://wjlm.goldsu.cn/file/6f9acd11-41da-4fab-a447-edac6d3cbd6a.mp3';
					autoCont.sessionCategory = 'ambient'
					autoCont.play()
					autoCont.onEnded(() => {
						autoCont.stop()
						autoCont.destroy()
					})
					
				}
				this.$myRuquestWs('home/game/team_stand', {
					game_id: this.gameData.id,
					team_id: this.userPeople.teamId,
					activ_id: this.game_config.activ_id
				}).then(res => {
					uni.vibrateLong({
						success: function() {
							console.log('success');
						}
					});
					// uni.showToast({
					// 	title: res.msg,
					// 	icon: 'none'
					// });
				})
			}
		}
	}
</script>

<style lang="scss">
	video {
		width: 100vw;
		height: 100vh;
		position: relative;
		z-index: 9;
	}

	.bg {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
	}

	.team {
		display: flex;
		margin-top: calc(60vmin / 7.5);
		margin-left: calc(40vmin / 7.5);
	}

	.team_item {
		padding: calc(15vmin / 7.5) 0;
		font-weight: 700;
		font-size: calc(26vmin / 7.5);
		position: relative;
		color: #fff;
		text-align: center;
		margin-right: calc(40vmin / 7.5);

		.icon {
			position: absolute;
			top: calc(142vmin / 7.5);
			left: 50%;
			transform: translateX(-50%);
			background-color: rgba(255, 255, 255, .85);
			border-radius: 50%;
		}

		image {
			width: calc(140vmin / 7.5);
			height: calc(140vmin / 7.5);
			margin: 0 auto;
			display: block;
			margin-bottom: calc(35vmin / 7.5);
		}
	}


	.rule {
		position: fixed;
		bottom: calc(40vmin / 7.5);
		left: calc(40vmin / 7.5);
		width: calc(96vmin / 7.5);
		height: calc(96vmin / 7.5);
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.23);
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: calc(24vmin / 7.5);
		color: #ffffff;
	}
</style>
